<template>
  <div>
    <el-card class="topCard">
      <span>名称：</span>
      <el-input placeholder="请输入名称"></el-input>
      <span>序列号：</span>
      <el-input placeholder="请输入序列号"></el-input>
      <el-button type="primary">查询</el-button>

    </el-card>

    <el-card class="bottomCard">
      <!-- 添加设备 -->
      <span>设备管理</span>
      <el-button type="primary"
                 class="addDevice"
                 @click="showNewDialog">+ 新建</el-button>
      <el-dialog title="添加设备"
                 :visible.sync="addDialogFormVisible">
        <el-form :model="form">
          <el-form-item label="名称"
                        :label-width="formLabelWidth">
            <el-input v-model="form.name"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="序列号"
                        :label-width="formLabelWidth">
            <el-input v-model="form.id"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注"
                        :label-width="formLabelWidth">
            <el-input v-model="form.other"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 表格 -->
      <el-table :data="deviceData[0]"
                border
                style="width: 100%">
        <el-table-column label="#"
                         type="index">
        </el-table-column>
        <el-table-column prop="SensorName"
                         label="设备名称">
        </el-table-column>
        <el-table-column prop="id"
                         label="设备序列号">
        </el-table-column>
        <el-table-column prop="remarks"
                         label="备注">
        </el-table-column>
        <el-table-column label="操作">
          <i class="el-icon-view blue"></i>
          <i class="
             el-icon-edit-outline green"></i>
          <i class="el-icon-delete red"></i>
        </el-table-column>
      </el-table>

      <!-- 页码 -->
      <el-pagination background
                     layout="prev, pager, next"
                     :total="4"
                     :page-size="2">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
import { getDevice } from '../../network/device.js';
export default {
  name: 'Device',
  data () {
    return {
      //设备数据
      deviceData: [],
      addDialogFormVisible: false,
      form: {
        id: '',
        name: '',
        other: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    };
  },
  created () {
    this.getDeviceData();
  },
  methods: {
    //获取设备数据
    async getDeviceData () {
      const res = await getDevice();
      if (res.status !== 200) {
        return this.$message.error('获取数据列表失败!');
      }
      console.log(res.data);
      this.deviceData.push(res.data);
      // console.log(this.deviceData);
    },

    //展示对话框
    showNewDialog () {
      this.addDialogFormVisible = true;
    }
  }
}
</script>

<style scoped>
.topCard {
  height: 80px;
}

.topCard .el-input {
  width: 250px;
  height: 50px;
  margin-right: 150px;
}

.bottomCard span {
  font-size: 20px;
}

.addDevice {
  float: right;
  width: 119px;
  height: 40px;
}

.el-table {
  margin-top: 30px;
}

.el-table-column {
  height: 67px;
}

.el-table i {
  font-size: 20px;
  margin-right: 50px;
}

.el-pagination {
  float: right;
  margin: 20px 0 20px 0;
}
</style>